<!DOCTYPE html>
{% extends 'base.html' %}
{% load static %}

{% block title %}
    -药品详情
{% endblock %}
active


{% block css %}
    <link rel="stylesheet" href="{% static 'css/detail.css' %}">
{% endblock %}





{% block indexHighlight %}
    active
{% endblock %}
{% block main_block %}
    <div class="row">
        {#    左侧栏#}
        <div class="col-md-6">
            <h1 style="margin-left: 20px">药品详情</h1>
            <ul class="list-group list-group-flush">
                <br><br>
                <li class="list-group-item">药品编号： {{ medicine.number }}</li>
                <li class="list-group-item">药品名： <strong>{{ medicine.name }}</strong></li>
                <li class="list-group-item">药品信息:</li>
                <li class="list-group-item">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{ medicine.detail }}</li>
                <li class="list-group-item">药品已使用量： {{ medicine.usedtotal }} g</li>
                <li class="list-group-item">药品剩余量： {{ medicine.nowtotal }} g</li>
                <li class="list-group-item">风险度： {{ medicine.riskfactor }} &nbsp;&nbsp;
                    {% if medicine.riskfactor > 5 %}
                        <span style="color: red">(危险品，请注意使用安全)</span>
                    {% elif  medicine.riskfactor <= 5 %}
                        <span style="color: green">(危险度较低，也请规范使用)</span>
                    {% endif %}
                </li>
            </ul>
            <div style="margin-top: 30px">
                <a href="{% url 'Lab:index' %}" style="margin-left:20px;margin-right: 40px;">
                    <button type="button" class="btn btn-primary btn-sm">
                        返回药品列表
                    </button>
                </a>


                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                        data-target="#myModal{{ medicine.id }}" id="addStudent">点击借用药品
                </button>
            </div>
            {#            拟态框#}
            <div class="modal fade" id="myModal{{ medicine.id }}" tabindex="-1" role="dialog"
                 aria-labelledby="myModal{{ medicine.id }}Label"
                 aria-hidden="true">
                <div class="modal-dialog" role="document" id="stuadd_modal">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title" id="myModal{{ medicine.id }}Label">
                                请确认借用</h5>
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            确认要借用该药品&nbsp;<strong>{{ medicine.name }}&nbsp;</strong>吗？
                            <br>
                            <form action="{% url 'Lab:subAndBo' medicine.id %}" method="post">
                                {% csrf_token %}
                                <div class="form-group">
                                    <label for="id_medicineUsedNum"
                                           class="col-sm-4 control-label">数量：</label>
                                    <div class="col-sm-8">

                                        <input type="text" class="form-control"
                                               name="medicineUsedNum"
                                               id="id_medicineUsedNum" required
                                               oninput="value=value.replace(/[^\d]/g,'')"
                                               placeholder="借用药品数量（g/ml）">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="id_lab"
                                           class="col-sm-4 control-label">实验室：</label>
                                    <div class="col-sm-8">
                                        {#                                        <input type="text" class="form-control" name="lab"#}
                                        {#                                               id="id_lab" required placeholder="请输入实验室名称">#}
                                        <select class="form-control" name="lab_id">
                                            {% for item in thisLab %}
                                                <option value="{{ item.id }}">{{ item.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">确认</button>
                                    <button type="button" class="btn btn-secondary"
                                            data-dismiss="modal">取消
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
        <div class="col-md-6">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: 600px;height:400px;margin-top: 50px"></div>
            <script type="text/javascript">
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    {#标题#}
                    title: {
                        text: '药品使用情况图',
                        subtext: '数据',
                        left: 'center'
                    },
                    {#提示框#}
                    tooltip: {
                        trigger: 'item'
                    },
                    {#图例，竖向排列#}
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    color: ['#FF6347', '#32CD32'],  // 定义颜色：红色表示已使用，绿色表示剩余
                    {#数据设置#}
                    series: [
                        {
                            name: '量（/g）',
                            type: 'pie',
                            {#半径#}
                            radius: '50%',
                            data: [

                                {value: {{ medicine.usedtotal }}, name: '药品已使用量' },
                                {value: {{ medicine.nowtotal }}, name: '药品剩余量' },

                            ],
                            {#高亮状态下的样式#}
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                {#绑定配置到图表#}
                option && myChart.setOption(option);

            </script>
        </div>
    </div>
    </div>
    <br>
{% endblock %}